<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 运单信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container clearfix">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="type" label="设备类型"></el-table-column>
                <el-table-column prop="gname" label="货物类型"></el-table-column>
                <el-table-column prop="start_time" label="发货时间" width="250px"></el-table-column>
                <el-table-column label="收货时间" width="250px">
                    <template slot-scope="scope">{{scope.row.end_time | active}}</template>
                </el-table-column>
                <el-table-column label="运单状态">
                    <template slot-scope="scope">{{scope.row.status | active_status}}</template>
                </el-table-column>
                <el-table-column label="报警状态">
                    <template slot-scope="scope">{{scope.row.is_alert | active_alert}}</template>
                </el-table-column>
                <el-table-column prop="contacts" label="联系人名称"></el-table-column>
                <el-table-column prop="phone" label="联系人电话"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <a :href="'http://localhost:8000/download/?down_id=' + scope.row.id"> 下载记录</a>
                    </template>
                </el-table-column>
            </el-table><br>
            <!-- 图表 -->
            <div id="myChart" class="schart-box"></div>
            
            <!-- 地图 -->
                <div class="amp-demo">
                <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" v-if="reFresh">
                    <!-- 点坐标  -->
                    <el-amap-marker :position="marker.position" :visible="marker.visible" :draggable="marker.draggable" vid="index" ></el-amap-marker>
                    <el-amap-marker :position="marker2.position" :visible="marker2.visible" :draggable="marker2.draggable" vid="index2"></el-amap-marker>
                    <el-amap-text v-for="(text,index) in texts" :key="index" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
                    <!-- 折线 -->
                    <el-amap-polyline :editable="polyline.editable"  :path="polyline.path" >
                    </el-amap-polyline>
                </el-amap>   
                </div>
        </div>
        
    </div>
</template>

<script>
import { getorder_id } from '../../api/api';
import Schart from 'vue-schart';
import echarts from 'echarts'
import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
    name: 'showorderinfo',
    data() {
        return {
            reFresh:true,
            downid:'',
            tableData: [],
            id: this.$route.query.id,

            slotStyle: {
                padding: '2px 8px',
                background: '#eee',
                color: '#333',
                border: '1px solid #aaa'
            },
            zoom: 12,
            center: [121.5273285, 31.25515044],
            polyline: {
                path: [[121.5389385, 31.21515044], [121.5273285, 31.21515044]],
                editable: false
            },
            marker: {
                position: [121.5273285, 31.21515044],
                visible: true,
                draggable: false,
                content:'2',
                template: '<span>2</span>',
            },
            marker2: {
                position: [121.5273285, 31.21515044],
                visible: true,
                draggable: false,
                content:'1',
                template: '<span>1</span>',
            },
            texts: [
                {
                    position: [121.5273285, 31.21515044],
                    text: '收货地',
                    offset: [0, -70],
                },
                {
                    position: [121.5273285, 31.21515044],
                    text: '发货地',
                    offset: [0, -70],
                },
            ],
            time_data:[],
            test_data:[]
        }
    },
    components: {
        Schart
    },
    created() {
        this.getData();
    },
    mounted() {
       
    },
    methods: {
        menuTree(){
            this.reFresh= false
            this.$nextTick(()=>{
                this.reFresh = true
            })
        },
        // 获取地图的数据
        getData() {
            getorder_id({id:this.id}).then(res => {
                this.tableData.push(res.order_one_data)
                console.log(this.tableData)
                var addr_shou_jing = parseFloat(res.order_one_data.address_shou.split(',')[0])
                var addr_shou_wei = parseFloat(res.order_one_data.address_shou.split(',')[1])
                var addr_fa_jing = parseFloat(res.order_one_data.address_fa.split(',')[0])
                var addr_fa_wei = parseFloat(res.order_one_data.address_fa.split(',')[1])
                this.center[0] = addr_fa_jing
                this.center[1] = addr_fa_wei
                this.polyline.path[0][0] = addr_fa_jing
                this.polyline.path[0][1] = addr_fa_wei
                this.polyline.path[1][0] = addr_shou_jing
                this.polyline.path[1][1] = addr_shou_wei
                this.marker2.position[0] = addr_fa_jing
                this.marker2.position[1] = addr_fa_wei
                this.marker.position[0] = addr_shou_jing
                this.marker.position[1] = addr_shou_wei
                this.texts[0].position[0] = addr_shou_jing
                this.texts[0].position[1] = addr_shou_wei
                this.texts[1].position[0] = addr_fa_jing
                this.texts[1].position[1] = addr_fa_wei
                this.menuTree()
                // 温度数据赋值
                for(let i=0,l=eval(res.order_one_data.temp).length;i<l;i++){
                    this.time_data.push(eval(res.order_one_data.temp)[i].time)
                    this.test_data.push(eval(res.order_one_data.temp)[i].temp)
                }
                var need_list = this.test_data
                var time_xaos = this.time_data
                // console.log(need_list,time_xaos)
                this.drawLine(need_list,time_xaos)
            });
        },
        drawLine(need_list,time_data){
            var options = {
                title:{
                    text:'运单数据记录'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend:{
                    data:['用户来源']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis:{
                    type: 'category',
                    boundaryGap: false,
                    data:time_data,
                    // axisLabel: {
                    // interval: 2, //0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
                    // rotate: -20 //倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
                    // }
                },
                yAxis:{
                    type:'value'
                },
                series:[{
                    name:'温度数据',
                    data:need_list,
                    type:'line', //设置图表主题
                    stack: '总量',
                }]
            }
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption(options);
        },
    },
    filters:{
        active(val){
            if (val) {
                return val
            }else{
                return '暂无'
            }
        },
        active_status(val){
            if (val>0) {
                return '完成'
            }else{
                return '在途'
            }
        },
        active_alert(val){
            if (val>0) {
                return '报警'
            }else{
                return '正常'
            }
        },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.schart-box {
    display: inline-block;
    margin: 20px;
    float: right;
    width: 600px;
    height: 400px;
}
.clearfix {
        height: auto;
        *zoom: 1
    }
.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}    
.clearfix:after {
    clear: both
}
.amap-demo {
    height: 500px;
}
</style>
